<template>
  <div class="account-list">
    <div class="top">
      <h1>账号列表</h1>
    </div>
    <div class="account-table">
      <el-table :data="tableData" stripe height="280" style="width: 100%" border row-key="id">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column v-if="false" property="id" label="ID" width="100" />
        <el-table-column property="account" label="账号" width="220" />
        <el-table-column property="userGroup" label="用户组" />
        <el-table-column property="ctime" label="创建时间" width="320">
          <template #default="scoped">{{ dataTime(scoped.row.ctime) }}</template>
        </el-table-column>


          <el-table-column label="操作" width="180">
            <template #default="scoped">
              <el-button size="default" type="primary" @click="handleEdit(scoped.row)">编辑</el-button>
              <el-button size="default" type="danger" @click="handleDelete(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>

    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="formData.currentPage" 
      v-model:page-size="formData.pageSize" 
      :page-sizes="[5, 10, 15, 20]"
      :size="size" :disabled="disabled" 
      :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" 
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改账号信息" width="500">
    <el-form :model="listEdit">
      <el-form-item label="账号名" :label-width="formLabelWidth">
        <el-input v-model="listEdit.account" autocomplete="off" />
      </el-form-item>

      <el-form-item label="用户组" :label-width="formLabelWidth">
        <el-select v-model="listEdit.userGroup" placeholder="用户组">
          <el-option label="超级管理员" value="超级管理员" />
          <el-option label="普通管理员" value="普通管理员" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmed">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import {gatList,delList,editList} from '../api/account'

// 隐藏对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const background = ref(true)
const disabled = ref(false)
const tableData = ref([])
const total = ref(0)
const formData = reactive({
  currentPage: 1,
  pageSize: 5
})


const listEdit =reactive({
  id:'',
  account:'',
  userGroup:''
})

const getListAccount = async () => {
  const res = await gatList(formData)
  tableData.value =res.data;
  total.value = res.total; 
}
getListAccount()

const dataTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const handleSizeChange = (val) => {
  getListAccount()
}
const handleCurrentChange = (val) => {
  getListAccount()
}



const handleEdit = ({id,account,userGroup}) => {
  listEdit.id = id;
  listEdit.account = account;
  listEdit.userGroup = userGroup;
  dialogFormVisible.value = true;
}

const handleDelete = async(id) => {
  const res = await delList({id})
  if(res.code === 0){
    ElMessage({
      type:'success',
      message: '删除成功'
    })
    getListAccount() 
  }
  else{
    ElMessage({
      type:'error',
      message: '删除失败'
    }) 
  }
}

// 确认修改
const confirmed = async () => {
  const res = await editList(listEdit)

  if(res.code === 0){
    dialogFormVisible.value = false;
    ElMessage({
      type: 'success',
      message: '修改成功'
    }) 
    getListAccount()
  }else{
    ElMessage({
      type:'error',
      message: '修改失败'
    }) 
  }
}
</script>

<style scoped>
.account-list {
  width: 100%;
  height: 100%;
  /* display: flex; */
  background-color: #fff;
  border-radius: 6px;
}

.top {
  width: 100%;
  height: 6%;
  font-size: 18px;
  /* font-weight: bold; */
  border-bottom: 1px solid #888787;
}

.top h1 {
  margin-left: 20px;
  line-height: 40px;
}

.account-table {
  margin-top: 20px;
  padding: 0 20px;
}

.demo-pagination-block{
  margin-top: 20px;
  padding: 0 20px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>